<template>
  <Card class="wrapper">
    <h2>SERVER ERROR</h2>
    <h3 class="bold">Looks Something went wrong, We're working on it.</h3>
    <p class="error-page-tip">But try one of these:</p>
    <section class="operatipns">
      <div><Icon type="md-refresh-circle" class="icon" /> <p>Try to Fresh</p></div>
      <div><Icon type="md-at" class="icon" /><p>Contact Us: <span>eyewearorders@motionglobal.com</span></p></div>
    </section>
  </Card>
</template>

<script>
  export default {
  	name: 'PageError'
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/sass/mixin';
  .wrapper {
    width: 55%;
    min-width: 550px;
    margin: 8% auto;
    padding: 50px;
    text-align: center;
    h2 {
      color: #cc0000;
      font-size: 30px;
    }
  }
  .error-page-tip {
    margin-top: 15px;
  }
  .operatipns {
    @include fj;
    width: 80%;
    margin: 20px auto;
    .icon {
      font-size: 35px;
      margin-bottom: 10px;
    }
    p {
      span {
        display: block;
        font-weight: bold;
      }
    }
  }
</style>
